<template>
	<view class="">
		<!-- 自定义导航栏 -->
		<u-navbar
			title="明细账"
			placeholder
			:autoBack="true"
			border
			class="good-nav-bar"
		>
			<view class="" slot="right">
				<u-icon name="search" color="#2979ff" size="28" @click="tagMode = !tagMode"></u-icon>
			</view>
		</u-navbar>
		<!-- 条件筛选 -->
		<view class="navbar-box" :style="{'margin-top': tagMode ? '-300rpx' : '0'}">
			<view class="navbar-box-date">
				<text style="font-size: 30rpx;">日期范围：</text>
				<view class="" style="display: flex;">
					<view @click="calendarStartVisible = true" style="display: flex;border-bottom: 1rpx solid #eee;">
						<u-icon name="calendar" color="#2979ff" size="25"></u-icon>
						<text>{{startDateVal}}</text>
					</view>
					<text style="margin: 0 10rpx;">至</text>
					<view @click="calendarEndVisible = true" style="display: flex;border-bottom: 1rpx solid #eee;">
						<u-icon name="calendar" color="#2979ff" size="25"></u-icon>
						<text>{{endDateVal}}</text>
					</view>
				</view>
				<view class="" style="width: 100rpx;display: flex;justify-content: flex-end;color: #2979ff;">
					<text @click="monthPickerVisible = true">月份</text>
				</view>
			</view>
			<view class="navbar-box-title">
				<text style="font-size: 30rpx;width: 150rpx;">物料名称：</text>
				<input type="text" :value="param.pname" style="width: 400rpx;border-bottom: 1rpx solid #eee;padding-bottom: 7rpx;" :disabled="true" @click="rightClick" />
				<view class="" style="flex:1;display: flex;justify-content: flex-end;color: #2979ff;">
					<text @click="recentClick">快捷选择</text>
				</view>
			</view>
			<view class="" style="height: 40rpx;margin-left: 150rpx;font-size: 25rpx;color: #aaa;" v-show="param.pname">
				<text style="margin-right: 30rpx;">规格：{{param.ptype}}</text>
				<text>单位：{{param.punit}}</text>
			</view>
			<view class="navbar-box-btn">
				<u-button :customStyle="{'height': '80rpx'}" type="primary" text="查询" color="#2979ff" @click="procGoodsStoreReport"></u-button>
			</view>
		</view>
		<!-- 月份选择器 -->
		<u-picker :closeOnClickOverlay="true" :show="monthPickerVisible" :columns="monthColumns" @confirm="confirmMonth" @close="monthPickerVisible = false" @cancel="monthPickerVisible = false"></u-picker>
		<!-- 日期选择组件 -->
		<u-datetime-picker :closeOnClickOverlay="true" :show="calendarStartVisible" mode="date" :value="startdate" @confirm="confirmStartDate" @close="calendarStartVisible = false" @cancel="calendarStartVisible = false"></u-datetime-picker>
		<u-datetime-picker :closeOnClickOverlay="true" :show="calendarEndVisible" mode="date" :value="enddate" @confirm="confirmEndDate" @close="calendarEndVisible = false" @cancel="calendarEndVisible = false"></u-datetime-picker>
		<!-- 返回顶部组件 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		
		<view class="container" v-show="tabbarVal == 0">
			<view class="container__body">
				<view class="proc-goods" :style="{'background-color': v.GoodsInNum == 0 ? '#0085ad' : '#2D8F8B'}" v-for="v in procGoods" :key="v.bz" @click="goGoodsDetail(v)">
					<view class="proc-goods-head proc-goods-item">
						<text class="proc-goods-head-title">{{v.name}}</text>
						<text class="proc-goods-head-date">{{v.plandate}}</text>
					</view>
					<view class="proc-goods-item">
						<view class="" v-show="v.GoodsInNum != 0" style="color: orange;font-weight: bold;">
							<text>收入：</text>
							<text>{{v.GoodsInNum}}</text>
						</view>
						<view class="" v-show="v.GoodsInNum == 0" style="color: orange;font-weight: bold;">
							<text>支出：</text>
							<text>{{v.GoodsOutNum}}</text>
						</view>
						<view>
							<text>结存：</text>
							<text>{{v.LeftNum}}</text>
						</view>
					</view>
					<view class="proc-goods-item">
						<view class="">
							<text>单价：</text>
							<text>{{v.UnitPrice}}元</text>
						</view>
						<view class="">
							<text>金额：</text>
							<text>{{v.LeftPrice}}元</text>
						</view>
					</view>
				</view>
				<no-data v-if="!procGoods.length"></no-data>
			</view>
		</view>
		
		<view class="" v-show="tabbarVal == 1">
			<view class="grid-box container__body">
				<view class="proc-goods" v-for="(v,i) in gridList" :key="i">
					<view class="proc-goods-head proc-goods-item">
						<text class="proc-goods-head-title">{{v.name}}</text>
						<text class="proc-goods-head-date">{{v.plandate}}</text>
					</view>
					<view class="proc-goods-item">
						<view class="">
							<text v-show="v.name != '本期结转'">
								<text>收入：</text>
								<text>{{v.GoodsInNum}}</text>
							</text>
						</view>
						<view class="">
							<text v-show="v.name != '本期结转'">
								<text>支出：</text>
								<text>{{v.GoodsOutNum}}</text>
							</text>
						</view>
						<view class="" style="color: orange;font-weight: bold;">
							<text>结存：{{v.LeftNum}}</text>
							<text></text>
						</view>
					</view>
					<view class="proc-goods-item">
						<view class="">
							<text>单价：</text>
							<text>{{v.UnitPrice}}元</text>
						</view>
						<view class="">
							<text>金额：</text>
							<text>{{v.LeftPrice}}元</text>
						</view>
					</view>
				</view>
				<no-data v-if="!gridList.length"></no-data>
			</view>
		</view>
		<!-- 快捷选择弹窗 -->
		<pop-box>
			<u-popup :show="recentVisible" mode="bottom"  @close="recentVisible = false" @open="recentVisible = true">
				<view class="recent">
					<view class="recent__item" hover-class="clickable" v-for="item in recentList" :key="item.id" @click="selectRecent(item)">
						<view class="recent__item--name">{{item.pname}}</view>
						<view class="recent__item--info">
							<text style="margin-right: 20rpx;">规格：{{item.ptype}}</text>
							<text>单位：{{item.punit}}</text>
						</view>
					</view>
					<no-data v-if="!recentList.length"></no-data>
				</view>
			</u-popup>
		</pop-box>
		
		<!-- 底部导航栏 -->
		<u-tabbar
			:value="tabbarVal"
			@change="tabbarChange"
			:fixed="true"
			:safeAreaInsetBottom="false"
			placeholder
		>
			<u-tabbar-item text="详情"></u-tabbar-item>
			<u-tabbar-item text="汇总"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import moment from 'moment'
	import PopBox from '@/components/custom/pop-box/index.vue'
	
	export default {
		components: {
			NoData,
			PopBox
		},
		data() {
			return {
				procGoods: [],//明细
				gridList: [],//汇总
				myid: '',
				calendarStartVisible: false,
				calendarEndVisible: false,
				startdate: moment().startOf('month').format('YYYY-MM-DD'),
				enddate: moment().endOf('month').format('YYYY-MM-DD'),
				gridVisible: false,
				tabbarVal: 0,
				tagMode: false,
				scrollTop: 0,
				param: {},
				monthPickerVisible: false,
				monthColumns: [['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']],
				month: '',
				recentVisible: false,
				recentList: []
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			startDateVal() {
				return moment(this.startdate).format('YYYY-MM-DD')
			},
			endDateVal() {
				return moment(this.enddate).format('YYYY-MM-DD')
			},
		},
		methods: {
			/**
			 * 获取明细账
			 */
			procGoodsStoreReport() {
				let that = this;
				if(!this.myid) {
					uni.showToast({
						title: '请先选择物资',
						icon: 'none'
					})
					return
				}
				let diff = moment(this.startdate).diff(this.enddate,'day');
				if(diff > 0) {
					uni.showToast({
						title: '起始时间不能超过结束时间',
						icon: 'none'
					})
					return
				}
				this.procGoods = [];
				this.gridList = [];
				_custom.getDataJava({
					apiname: 'procGoodsStoreReport',
					apiparam: {
						myid: this.myid,
						startdate: moment(this.startdate).format('YYYY-MM-DD'),
						enddate: moment(this.enddate).format('YYYY-MM-DD')
					},
					success(res) {
						if(res.length) {
							res.forEach(item => {
								if(item.name == '上期结存' || item.name == '本期累计' || item.name == '本期结转') {
									that.gridList.push(item)
								} else {
									that.procGoods.push(item)
								}
							})
						} else {
							uni.showToast({
								title: '数据为空',
								icon: 'none'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '接口出错',
							icon: 'error'
						})
					}
				})
			},
			/**
			 * 点击顶部导航栏加号图标
			 */
			rightClick() {
				this.select('','add')
			},
			select(v,t) {
				uni.navigateTo({
					url: '../goods-in/select?data=' + JSON.stringify(v) + '&type=' + t,
				})
			},
			/**
			 * 从下个页面选择的项目
			 * @param {Object} v 传参
			 */
			cbsList(v) {
				let that = this;
				if(v) {
					console.log(v)
					this.myid = v.data.myid;
					this.param = v.data;
				}
			},
			/**
			 * 点击开始时间选择器确认按钮事件
			 * @param {Object} v  回调参数
			 */
			confirmStartDate(v) {
				this.startdate = v.value;
				this.calendarStartVisible = false;
			},
			/**
			 * 点击结束时间选择器确认按钮事件
			 * @param {Object} v  回调参数
			 */
			confirmEndDate(v) {
				this.enddate = v.value;
				this.calendarEndVisible = false;
			},
			/**
			 * 切换底部导航栏选项时触发
			 */
			tabbarChange(e) {
				this.tabbarVal = e;
			},
			/**
			 * 月份选择确认
			 * @param {Object} e  回调参数
			 */
			confirmMonth(e) {
				let year = moment(this.startdate).year();
				let index = e.indexs[0] + 1;
				let month = index < 10 ? '0' + index : index;
				let date = year + '-' + month;
				let startDateVal = moment(date).startOf('month').format('YYYY-MM-DD');
				let endDateVal = moment(date).endOf('month').format('YYYY-MM-DD');
				this.startdate = moment(startDateVal).valueOf();
				this.enddate = moment(endDateVal).valueOf();
				this.monthPickerVisible = false;
			},
			/**
			 * 点击快捷选择
			 */
			recentClick() {
				this.getCbsRecentUseList();
				this.recentVisible = true;
			},
			/**
			 * 最近3个月的物资
			 */
			getCbsRecentUseList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getCbsRecentUseList',
					success(res) {
						if(res.length) {
							that.recentList = res
						}
					},
				})
			},
			/**
			 * 选择最近物资
			 */
			selectRecent(v) {
				this.myid = v.myid;
				this.param = v;
				this.recentVisible = false;
			},
			/**
			 * 跳转到物资详情页面
			 */
			goGoodsDetail(v) {
				console.log(v)
				let data = {
					id: v.id
				}
				let type = v.GoodsOutNum == '0' ? 1 : 2;
				uni.navigateTo({
					url: '/pages/home/child/goods-in/detail?data=' + JSON.stringify(data) + '&goodType=' + type + '&type=edit'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		
		&__body {
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
	}
	
	.navbar-box {
		position: relative;
		width: 100%;
		z-index: 9;
		padding-left: 20rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		transition: all .5s ease-in-out;
		
		&-title {
			height: 60rpx;
			font-size: 25rpx;
			display: flex;
			align-items: flex-end;
		}
		
		&-date {
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
		}
		
		&-btn {
			height: 100rpx;
			margin-top: 20rpx;
		}
	}
	
	.proc-goods {
		border-bottom: 1rpx solid #eee;
		background-color: #004b79;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 20rpx 20rpx;
		
		&-item {
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			align-items: center;
			color: #fff;
		}
		
		&-head {
			height: 100rpx;
			line-height: 100rpx;
			
			&-title {
				font-size: 30rpx;
				width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			&-date {
				font-size: 25rpx;
			}
		}
	}
	
	.recent {
		height: 400px;
		overflow-y: scroll;
		
		&__item {
			height: 140rpx;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			&--info {
				color: #aaa;
				font-size: 27rpx;
			}
		}
	}
</style>
